/**
 * 新闻详情页面组件
 * 显示单篇新闻的完整内容和相关信息
 * 包括标题、作者、发布时间、访问量等统计数据
 */
import React, { useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { Card, Breadcrumb, Descriptions, Spin, Alert } from 'antd'
import { useNewsDetail } from '../../hooks/useNewsManage'
import { updateNewsViews } from '../../api/newsApi'
import { News } from '../../types/news'

/**
 * 新闻详情页面组件
 * 根据URL参数中的ID加载并显示新闻详情
 * 
 * 功能特点：
 * 1. 通过路由参数获取新闻ID
 * 2. 使用自定义Hook获取新闻详情数据
 * 3. 显示新闻各项元数据（作者、时间、区域等）
 * 4. 支持富文本内容渲染
 * 5. 包含加载状态和错误处理
 * 
 * @returns 新闻详情页面组件
 */
const Detail: React.FC = () => {
  // 从URL路径中获取新闻ID参数
  const { id } = useParams<{ id: string }>()
  // 将ID转换为数字类型
  const numericId = id ? parseInt(id, 10) : 0
  // 使用自定义Hook获取新闻详情，并明确类型为News
  const { data, isLoading, isError } = useNewsDetail(numericId)
  // 确保类型正确
  const newsInfo = data as News | undefined
  
  // 当页面加载时更新浏览量
  useEffect(() => {
    if (numericId && newsInfo) {
      // 异步更新浏览量
      updateNewsViews(numericId).catch((error: Error) => {
        console.error('更新浏览量失败:', error);
      });
    }
  }, [numericId, newsInfo]);

  // 错误处理 - 当加载失败时显示错误提示
  if (isError) {
    return (
      <Alert
        message="加载失败"
        description="无法加载新闻内容，请稍后重试"
        type="error"
        showIcon
      />
    )
  }

  return (
    <div className="site-card-border-less-wrapper">
      {/* 面包屑导航 */}
      <Breadcrumb
        items={[
          { title: '首页' },
          { title: '新闻列表', href: '/news' },
          { title: '新闻详情' },
        ]}
        style={{ margin: '16px 0' }}
      />
      
      {/* 加载状态包装 */}
      <Spin spinning={isLoading}>
        {
          // 只有新闻数据存在且有标题时才渲染内容，防止显示空白卡片
          newsInfo && newsInfo.title ? (
            <Card title={newsInfo.title} bordered={false} style={{ width: '100%' }}>
              {/* 新闻元数据描述列表 */}
              <Descriptions>
                <Descriptions.Item label="作者">{newsInfo.author}</Descriptions.Item>
                <Descriptions.Item label="发布时间">
                  {newsInfo.publishTime ? new Date(newsInfo.publishTime).toLocaleDateString() : '未发布'}
                </Descriptions.Item>
                <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                <Descriptions.Item label="访问数量">{newsInfo.view}</Descriptions.Item>
                <Descriptions.Item label="点赞数量">{newsInfo.star}</Descriptions.Item>
                <Descriptions.Item label="评论数量">0</Descriptions.Item>
              </Descriptions>
              
              {/* 分隔线 */}
              <div style={{ margin: '24px 0', border: '1px solid #f0f0f0' }}></div>
              
              {/* 新闻正文内容 - 支持HTML渲染 */}
              <div dangerouslySetInnerHTML={{ __html: newsInfo.content }}></div>
            </Card>
          ) : null
        }
      </Spin>
    </div>
  )
}

export default Detail